<!DOCTYPE html>
<html lang="en" style="font-size: 100px;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>科室呼叫</title>
    <style rel="stylesheet" type="text/css">
        :root {
            /*//#4e1423*/
            --skin-background-color: #fff;
            --skin-main-bg-color: #0ca1e5;
            --skin-main-color: #fff;
            --skin-color: #395c7c;
            --skin-header-bg-color: var(--skin-background-color);
            --skin-footer-bg-color: var(--skin-main-bg-color);
            --skin-footer-color: #fff;
            --skin-header-just-color: var(--skin-main-color);
            --skin-header-await-color: var(--skin-main-color);
            --skin-content-just-color: #0ca1e5;
            --skin-content-await-color: #009688;
            --skin-content-column-border:rgba(12, 161, 229, 0.2);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }
        html, body {
            width: 100%;
            height: 100%;
            -webkit-font-smoothing: antialiased;
            font-size: 0.30rem;
        }
        body {
            padding: 0;
            display: flex;
            flex-direction: column;
            background: var(--skin-main-bg-color);
            color: var(--skin-color);
        }
        .yy-screen-header {
            flex: 0 0 1rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 0 0.10rem;
            background: var(--skin-header-bg-color);
            font-weight: bold;
        }
        .yy-screen-header_customer, .yy-screen-header_title, .yy-screen-header_time {
            flex: 1;
            display: inline-flex;
            min-width: 0;
        }
        .yy-screen-header_customer {
            justify-content: flex-start;
            font-size: 0.5rem;
            flex: 0 0 50%;
        }
        .yy-screen-header_title {
            justify-content: center;
            font-size: 0.40rem;
            flex: auto;
            min-width: 0;
            height: 100%;
            align-self: baseline;
            display: none;
        }
        /*.yy-screen-header_title > div.title {*/
        /*    background: var(--skin-main-bg-color);*/
        /*    padding: 0 0.5rem;*/
        /*    border-bottom-left-radius: 0.50rem;*/
        /*    border-bottom-right-radius: 0.50rem;*/
        /*    box-shadow: 0 0 0.12rem 0 #333;*/
        /*    color: var(--skin-main-color);*/
        /*    width: 100%;*/
        /*    align-items: center;*/
        /*    justify-content: center;*/
        /*    display: none;*/
        /*}*/
        .yy-screen-header_time {
            justify-content: flex-end;
            font-size: 0.5rem;
            flex: 0 0 50%;
        }
        .yy-screen-content {
            flex: 1;
            min-height: 0;
            padding: 0.1rem;
            margin: 0.1rem;
            border: 0;
            background: #fff;
            color: #333;
            display: flex;
            flex-direction: column;
            font-size: 0.4rem;
        }

        .yy-screen-content_header {
            display: flex;
            flex-direction: row;
            background: var(--skin-main-bg-color);
            height:0.7rem;
            color: var(--skin-main-color);
        }

        .yy-screen-content_header--just {
            color: var(--skin-header-just-color);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .yy-screen-content_header--await {
            color: var(--skin-header-await-color);
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
        }
        .yy-screen-content_list {
            border-radius: 4px;
            flex: 1;
            min-height: 0;
            overflow-y: auto;
        }
        .yy-screen-content_list-row {
            display: flex;
            flex-direction: row;
            height: 0.8rem;
        }

        .yy-screen-content_column {
            flex: 1;
            justify-content: center;
            align-items: center;
            display: inline-flex;
            min-width: 0;
            padding: 0rem;
            border: 0.01rem solid var(--skin-content-column-border);
            white-space: nowrap;
            overflow: hidden;
        }
        .yy-screen-content_column--room {
            flex: 0 0 2.5rem;
        }
        .yy-screen-content_column--per {
            flex: 0 0 3.5rem;
        }
        .yy-screen-content_column--doc {
            flex: 0 0 2.5rem;
        }
        .yy-screen-content_column--awaitCount {
            flex: 0 0 1rem;
        }
        .yy-screen-content_column--just {
            color: var(--skin-content-just-color);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .yy-screen-content_column--await {
            color: var(--skin-content-await-color);
            display: flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
        }
        .yy-screen-content_column--just > span, .yy-screen-content_column--await > span{
            display: inline-flex;
            flex:1;
            align-items: center;
            justify-content: center;
        }


        .yy-screen-footer {
            flex: 0 0 0.60rem;
            background: var(--skin-footer-bg-color);
            border-radius: 4px;
            color: var(--skin-footer-color);
            padding: 0rem;
            display: flex;
        }
        .yy-screen-footer_company {
            flex: 0 0 2rem;
        }
        .yy-screen-footer_text {
            flex: 1;
            min-width: 0;
            padding: 0.15rem;
            display: inline-flex;
            align-items: center;
        }

        #yy-screen-just-call {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            padding: 0;
            background: #f1f1f1;
            box-shadow: 0 0 10px 5px #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            white-space: nowrap;
            letter-spacing: 0.1rem;
            font-size: 0.6rem;
            font-weight: bold;
            max-width: 90%;
        }
        #yy-screen-just-call .yy-screen-just-call__message > div:first-child {
            padding: 0.1rem 0.25rem;
            margin-bottom: 0.2rem;
            font-size: 1.8rem;
            background: var(--skin-main-bg-color);
            color: var(--skin-main-color);
        }
        #yy-screen-just-call .yy-screen-just-call__message > div:last-child {
            padding: 0.1rem 0.25rem 0.3rem;
        }

        #yy-screen-just-call .yy-screen-just-call__message-patient,
        #yy-screen-just-call .yy-screen-just-call__room {
            color: #e81123;
            font-weight: bold;
            font-size: 0.6rem;
        }

        .marquee {
            overflow: hidden;
            width: 100%; /* 设置滚动容器的宽度 */
            position: relative; /* 为了使用绝对定位 */
        }
        .marquee pre{
            white-space: nowrap;
            display: inline-block;
            animation: marquee 60s linear infinite;
            animation-delay: -60s;
            padding-left: 100%;
        }

        .marquee pre:nth-child(2) {
            animation: marquee-two 60s linear infinite;
            animation-delay: -30s;
        }

        /* 定义关键帧动画 */
        @keyframes marquee {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }
        @keyframes marquee-two {
            0% {
                transform: translateX(0%);
            }
            100% {
                transform: translateX(-200%);
            }
        }


        .scroll-text-box {
            width: 100%;
            border: 0;
            text-align: center;
        }

        .scroll-text-wrapper {
            max-width: 100%;
            display: inline-block;
            vertical-align: top;
            overflow: hidden;
            white-space: nowrap;
        }

        .scroll-text-item {
            animation: scroll linear 4s alternate infinite;
            float: left;
        }

        @keyframes scroll {
            0% {
                margin-left: 0;
                transform: translateX(0);
            }

            10% {
                margin-left: 0;
                transform: translateX(0);
            }

            90% {
                margin-left: 100%;
                transform: translateX(-100%);
            }

            100% {
                margin-left: 100%;
                transform: translateX(-100%);
            }
        }

        .yy-screen-footer_company-tips {
            color: #E6A23C;
            position: relative;
            top: 0.05rem;
            width: 0.3rem;
            margin-left: auto;
            align-self: center;
        }

        .icon-blink {
            animation: blink 3s infinite;
            animation-timing-function: steps(1); /* 使得闪烁更为突兀 */
        }
    </style>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript">
        var CallPage = (function (Utils, win, doc, TTS) {
            var _deviceIp = null
            var _deviceRoom = null
            var _appKey = null
            var _appSecret = null
            // 显示数据队列
            var _callData = []
            var _rowCount = 1
            var _pageIndex = 1
            var _pageChangeInterval = 10
            var _emplLoginTimeout = null
            var _messageBroadcast = null
            return {
                _dialogItemChangeInterval: null,
                setMeta: function (deviceIp, appKey, appSecret, messageBroadcast) {
                    _appKey = appKey
                    _appSecret = appSecret
                    _deviceIp = deviceIp
                    _messageBroadcast = messageBroadcast
                },
                setDataList: function (data) {
                    _callData = data.sort(function (a, b) {
                        var aOrderNo = a.roomOrderNo || 1
                        var bOrderNo = b.roomOrderNo || 1
                        return aOrderNo - bOrderNo
                    })
                },
                setDevice: function (obj, appKey, appSecret, ip) {
                    _deviceRoom = obj || null
                },
                // 定时获取信息，容错处理
                selectCurrentLogin: function () {
                    if (_deviceRoom) {
                        Utils.request(Utils.baseUrl + '/queue/device/' + _deviceRoom.device.id + '/connect/room/list', 'get', null, function(error, res) {
                            if (!error && res && res.code === 200 && res.data) {
                                CallPage.clear()
                                CallPage.setDataList(res.data)
                                CallPage.render()
                            }
                            setTimeout(function () {
                                CallPage.selectCurrentLogin()
                            }, 60 * 1000)
                        })
                    }
                },
                call: function (data) {
                    const index = _callData.findIndex(item => item.roomId === data.roomId && item.emplId === data.emplId)
                    if (index >= 0) {
                        _callData[index].just = data.just
                        if (data.await && data.await.length ) {
                            _callData[index].await = data.await
                        }
                        this.renderRow(index, _callData[index])
                        CallDialog
                            .setConnectDevice(_deviceRoom)
                            .setBroadcastEngine(_messageBroadcast)
                            .show(_callData[index])
                    } else {
                        CallPage.add(data)
                    }
                },
                changeEmplStatus: function (data) {
                    const index = _callData.findIndex(item => item.roomId === data.roomId && item.emplId === data.emplId)
                    if (index >= 0) {
                        _callData[index].emplStatus = data.status
                        this.renderRow(index, _callData[index])
                    }
                },
                add: function (data) {
                    const index = _callData.findIndex(item => item.roomId === data.roomId && item.emplId === data.emplId)
                    if (index < 0) {
                        _callData.push(data)
                        CallPage.generateTitle()
                        this.render()
                    }
                },
                remove: function (data) {
                    var index = _callData.findIndex(item => item.roomId === data.roomId && item.emplId === data.emplId)
                    if (index >= 0) {
                        _callData.splice(index, 1)
                        this.clear()
                        this.renderPage()
                    }
                },
                generateTitle: function () {
                    var departNameStr = ''
                    for (var data of _callData) {
                        if (!departNameStr.includes(data.departName)) {
                            if (departNameStr) {
                                departNameStr += ','
                            }
                            departNameStr += data.departName
                        }
                    }
                    if (departNameStr) {
                        document.querySelector('div.yy-screen-header_title > div').style.display = 'none'
                        document.querySelector('div.yy-screen-header_title > div').innerHTML = departNameStr
                    } else {
                        document.querySelector('div.yy-screen-header_title > div').style.display = 'none'
                    }
                },
                init: function () {
                    var dataContainer = document.querySelector('div.yy-screen-content_list')
                    var rowTemplate = document.querySelector('div#html-template-container > div.yy-screen-content_list-row')
                    var containerHeight = dataContainer.getBoundingClientRect().height;
                    var firstRow = document.createElement('div')
                    firstRow.setAttribute('class', 'yy-screen-content_list-row')
                    firstRow.setAttribute('data-index', 0)
                    firstRow.innerHTML = rowTemplate.innerHTML
                    dataContainer.appendChild(firstRow)
                    var rowHeight = firstRow.getBoundingClientRect().height;
                    _rowCount = Math.floor(containerHeight / rowHeight)
                    var otherHeight = containerHeight - _rowCount * rowHeight
                    var perAddHeight = otherHeight / _rowCount
                    for (var i = 1; i < _rowCount; i++) {
                        var row = document.createElement('div')
                        row.setAttribute('data-index', i)
                        row.setAttribute('class', 'yy-screen-content_list-row')
                        row.setAttribute('style', 'height:' + (rowHeight + perAddHeight) + 'px')
                        row.innerHTML = rowTemplate.innerHTML
                        dataContainer.appendChild(row)
                    }
                    return this
                },
                clear: function () {
                    if (CallPage._dialogItemChangeInterval) {
                        clearTimeout(CallPage._dialogItemChangeInterval)
                        CallPage._dialogItemChangeInterval = null
                    }
                    var dataContainer = document.querySelector('div.yy-screen-content_list')
                    for (var i = 0; i < _rowCount; i++) {
                        var rowContainer = dataContainer.querySelector('div[data-index="'+i+'"]')
                        var rowRoomEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(1)')
                        rowRoomEle.innerText = ''
                        var rowItemEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(2)')
                        rowItemEle.innerText = ''
                        var rowEmplEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(3)')
                        rowEmplEle.innerText = ''
                        var rowAwaitEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(4)')
                        rowAwaitEle.innerHTML = ''
                        var rowJustEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(5)')
                        rowJustEle.innerHTML = ''
                        var rowAwaitEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(6)')
                        rowAwaitEle.innerHTML = ''
                    }
                    return this
                },
                removeUI: function () {
                    if (CallPage._dialogItemChangeInterval) {
                        clearTimeout(CallPage._dialogItemChangeInterval)
                        CallPage._dialogItemChangeInterval = null
                    }
                    var dataContainer = document.querySelector('div.yy-screen-content_list')
                    dataContainer.innerHTML = ""
                    return this
                },
                renderRow: function (index, rowData) {
                    var dataContainer = document.querySelector('div.yy-screen-content_list')
                    var rowContainer = dataContainer.querySelector('div[data-index="'+(index % _rowCount)+'"]')
                    var rowRoomEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(1)')
                    rowRoomEle.innerHTML = `<div class='scroll-text-box'> <div class='scroll-text-wrapper'> <div class='scroll-text-item'>${rowData.roomName}</div></div></div>`
                    var rowItemEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(2)')
                    rowItemEle.innerText = rowData.departName
                    var rowEmplEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(3)')
                    var prefix = "";
                    if (rowData.emplStatus === 0) {
                        prefix = "(<span style='color: red;'>暂停</span>)"
                    }
                    rowEmplEle.innerHTML = rowData.emplName + prefix

                    var rowAwaitEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(4)')
                    rowAwaitEle.innerHTML = rowData.awaitCount

                    var rowJustEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(5)')
                    if (rowData.just && rowData.just.length > 0) {
                        var rowJustEleHtml = '<span>';
                        var justData = rowData.just[rowData.just.length - 1]
                        if (justData.subQueueFlag === 7) {
                            rowJustEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">VIP</span>`
                        } else  if (justData.subQueueFlag === 6) {
                            rowJustEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">优</span>`
                        } else if (justData.subQueueFlag === 3) {
                            rowJustEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">回</span>`
                        } else if(justData.scheduleFlag) {
                            rowJustEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">预</span>`
                        } else {
                            rowJustEleHtml += justData.registerNo  + "号 "
                        }

                        rowJustEleHtml += `<span>${Utils.formatPatientName(justData.patientName)}</span>`
                        // if (justData.scheduleFlag && justData.scheduleSignState && +justData.scheduleSignState === 3) {
                        //     rowJustEleHtml+= `(迟到)`
                        // }
                        rowJustEleHtml += '</span>';
                        rowJustEle.innerHTML = rowJustEleHtml
                    } else {
                        rowJustEle.innerHTML = ''
                    }
                    var rowAwaitEle = rowContainer.querySelector('div.yy-screen-content_column:nth-child(6)')
                    var rowAwaitEleHtml = '';
                    if (rowData.await && rowData.await.length > 0) {
                        var len = Math.min(2, rowData.await.length)
                        for(let j = 0; j < len; j++) {
                            rowAwaitEleHtml += '<span>'
                            if (rowData.await[j].subQueueFlag === 7) {
                                rowAwaitEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">VIP</span>`
                            } else  if (rowData.await[j].subQueueFlag === 6) {
                                rowAwaitEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">优</span>`
                            } else if (rowData.await[j].subQueueFlag === 3) {
                                rowAwaitEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">回</span>`
                            } else if (rowData.await[j].scheduleFlag) {
                                rowAwaitEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">预</span>`
                            } else {
                                rowAwaitEleHtml += `<span style="display: inline-block; margin-right: 0.08rem;">${rowData.await[j].registerNo  + "号 "}</span>`
                            }

                            rowAwaitEleHtml += `<span>${Utils.formatPatientName(rowData.await[j].patientName)}</span>`

                            if (rowData.await[j].passedFlag == 1) {
                                rowAwaitEleHtml += "(过)"
                            }
                            rowAwaitEleHtml += '</span>'
                        }
                        rowAwaitEle.innerHTML = rowAwaitEleHtml
                    } else {
                        rowAwaitEle.innerHTML = ''
                    }
                },
                renderPage: function () {
                    var dataList = _callData.slice((_pageIndex - 1) * _rowCount , (_pageIndex - 1) * _rowCount + _rowCount)
                    for (var i = 0; i < dataList.length; i++) {
                        this.renderRow(i, dataList[i])
                    }
                    return this
                },
                render: function () {
                    var that = this
                    var pageCount = _callData.length % _rowCount === 0 ? _callData.length / _rowCount : Math.ceil(_callData.length / _rowCount)
                    if(_pageIndex > 1) {
                        this.clear()
                    }
                    this.renderPage()
                    if (_pageIndex + 1 <= pageCount) {
                        _pageIndex += 1
                    } else {
                        _pageIndex = 1
                    }
                    if (pageCount > 1) {
                        CallPage._dialogItemChangeInterval = setTimeout(function () {
                            that.render()
                        }, _pageChangeInterval * 1000)
                    }
                }
            }
        })(Utils, window, document, TTS)
        window.onload = function () {
            var params = Utils.getQueryParams(window.location.href)
            if (params) {
                if (params.server_url) {
                    Utils.baseUrl = params.server_url
                }
                if (params.customer_title) {
                    document.querySelector('div.yy-screen-header_customer div.customer-title').innerHTML = decodeURIComponent(params.customer_title)
                }
                if (params.customer_logo) {
                    document.querySelector('div.yy-screen-header_customer div.customer-logo > img').setAttribute("src", decodeURIComponent(params.customer))
                    document.querySelector('div.yy-screen-header_customer div.customer-logo').style.display = ''
                } else {
                    document.querySelector('div.yy-screen-header_customer div.customer-logo').style.display = 'none'
                }
            }
            params = params || {}
            console.log('current window android::::', window.Android)
            CallPage.setMeta(params.client_id, params.app_key, params.app_secret, window.Android)
            CallPage.selectCurrentLogin()
            DateTimeRender.render(document.querySelector("div.yy-screen-header_time"))
            Utils.resetFontSize()
            WebSocketClient.init(params.client_id, function callback(isSuccess, res) {
                console.log('get socket message :::', res)
                if (isSuccess) {
                    document.querySelector("span.yy-screen-footer_company-tips").style.display = 'none'
                    var result = res ? JSON.parse(res) : {}
                    if (result.action === 'list_login_empl') {
                        CallPage.clear()
                        CallPage.setDataList(result.data)
                        CallPage.render()
                    } else if (result.action === 'set_server_time') {
                        DateTimeRender.updateLocalTime(result.data)
                    } else if (result.action === "SSE_EMPLOYEE_LOGIN") {
                        result.data && CallPage.add(result.data)
                    } else if (result.action === 'SSE_EMPLOYEE_LOGOUT') {
                        result.data && CallPage.remove(result.data)
                    } else if (result.action === 'SSE_EMPLOYEE_CALL_CHANGE') {
                        result.data && CallPage.call(result.data)
                    } else if (result.action === 'SSE_EMPLOYEE_STATUS_CHANGE') {
                        // 医生状态改变
                        CallPage.changeEmplStatus(result.data);
                    }
                } else {
                    document.querySelector("span.yy-screen-footer_company-tips").style.display = ''
                }
            })
            CallPage.init().render()
            window.onresize = function () {
                Utils.resetFontSize()
                CallPage.removeUI().init().render()
            }
            window.onbeforeunload = function () {
                SSEUtils.stop()
            }
        }

    </script>
</head>
<body class="yy-call">
  <div class="yy-screen-header">
      <div class="yy-screen-header_customer">
          <div class="customer-logo" style="width: 0.9rem;">
              <img style="width:100%;" />
          </div>
          <div class="customer-title">
          </div>
      </div>
      <div class="yy-screen-header_title">
          <div class="title"></div>
      </div>
      <div class="yy-screen-header_time"></div>
  </div>
  <div class="yy-screen-content">
      <div class="yy-screen-content_header">
         <div class="yy-screen-content_column yy-screen-content_column--room">诊室</div>
         <div class="yy-screen-content_column yy-screen-content_column--per">科室</div>
         <div class="yy-screen-content_column yy-screen-content_column--doc">医师</div>
         <div class="yy-screen-content_column yy-screen-content_column--awaitCount">候诊</div>
         <div class="yy-screen-content_column yy-screen-content_column--per yy-screen-content_header--just">就诊中</div>
         <div class="yy-screen-content_column yy-screen-content_header--await">候诊中</div>
      </div>
      <div class="yy-screen-content_list">

      </div>
  </div>
  <div class="yy-screen-footer">
      <div class="yy-screen-footer_company"></div>
      <div class="yy-screen-footer_text marquee" id="scrollText">
          <pre>       请保持安静，为了您和他人的健康,请勿在医院内吸烟!       </pre>
          <pre>       请保持安静，为了您和他人的健康,请勿在医院内吸烟!      </pre>
      </div>
      <span class="yy-screen-footer_company-tips icon-blink" style="display:none;">
          <i class="el-icon" data-v-ea893728="" style="font-size: 20px;">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728="">
                  <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896m0 832a384 384 0 0 0 0-768 384 384 0 0 0 0 768m48-176a48 48 0 1 1-96 0 48 48 0 0 1 96 0m-48-464a32 32 0 0 1 32 32v288a32 32 0 0 1-64 0V288a32 32 0 0 1 32-32"></path>
              </svg>
          </i>
      </span>
  </div>

  <div id="yy-screen-just-call" style="display: none;">
      <div class="yy-screen-just-call__message"></div>
  </div>
  <div id="html-template-container" style="display: none; position: absolute; z-index: -1; width: 0;height: 0; overflow: hidden;">
      <div class="yy-screen-content_list-row">
          <div class="yy-screen-content_column yy-screen-content_column--room"></div>
          <div class="yy-screen-content_column yy-screen-content_column--per"></div>
          <div class="yy-screen-content_column yy-screen-content_column--doc"></div>
          <div class="yy-screen-content_column yy-screen-content_column--awaitCount"></div>
          <div class="yy-screen-content_column yy-screen-content_column--per yy-screen-content_column--just"></div>
          <div class="yy-screen-content_column yy-screen-content_column--await"> </div>
      </div>
  </div>
</body>
</html>